<template>
  <div class="container">
    <div class="logo"></div>

    <van-form @submit="onSubmit">
      <van-field
        class="input"
        v-model="phone"
        size="large"
        name="phone"
        required
        type="tel"
        placeholder="输入手机号"
        :rules="[
          { required: true },
          { pattern: $reg.phone, message: '请输入正确的手机号码' },
        ]"
      />
      <van-field
        class="input"
        size="large"
        v-model="password"
        :type="passShow ? 'text' : 'password'"
        name="password"
        required
        placeholder="请输入密码"
        :right-icon="passShow ? 'eye-o' : 'closed-eye'"
        @click-right-icon="passShow = !passShow"
        :rules="[
          { required: true },
          { pattern: $reg.pwd, message: '请输入正确密码' },
        ]"
      />
      <van-field
        class="input"
        v-model="dbpass"
        :type="passShow ? 'text' : 'password'"
        required
        placeholder="再次输入密码"
        :rules="[
          { required: true },
          { pattern: $reg.pwd, message: '请输入正确密码' },
          { validator: samepass, message: '密码不一致' },
        ]"
      />
      <van-field
        class="input"
        v-model="sms"
        required
        type="digit"
        maxlength="4"
        placeholder="短信验证码"
        :rules="[{ required: true }]"
      >
        <template #button>
          <van-button
            size="small"
            native-type="button"
            :disabled="!phoneBe"
            v-show="sendBtnShow"
            @click.stop="sendSms"
            type="primary"
            >发送验证码</van-button
          >
          <van-button
            size="small"
            native-type="button"
            v-show="!sendBtnShow"
            disabled
            type="warning"
          >
            {{ sendBtnNum }} S</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button
          class="button"
          round
          block
          type="danger"
          native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
    <p class="registerlink">
      <router-link :to="{ name: 'login' }">去登录</router-link>
    </p>
    <p class="forgotPass registerlink" @click="$router.push('home')">
      返回首页
    </p>
  </div>
</template>

<script>
import { Notify } from "vant";
var sendBtnTimer = null;
export default {
  data() {
    return {
      phone: "",
      password: "",
      dbpass: "",
      sms: "",
      passShow: false,
      phoneBe: false,
      sendBtnShow: true,
      sendBtnNum: 0,
    };
  },
  watch: {
    phone(v) {
      if (this.$reg.phone.test(v)) {
        this.phoneBe = true;
      } else {
        this.phoneBe = false;
      }
    },
  },
  methods: {
    samepass(v) {
      return v == this.password ? true : false;
    },
    onSubmit(v) {
      delete v.undefined;
      console.log("submit", v);
      this.$ajax.register(v).then((res) => {
        Notify({ type: "success", message: res.msg });
      });
    },
    sendSms() {
      this.sendBtnShow = false;
      if (this.sendBtnNum) return false;

      this.$ajax
        .sendcaptcha({
          phone: this.phone,
        })
        .then((res) => {
          Notify({ type: "success", message: res.msg });
        });
      this.sendBtnNum = 5;
      this.sendBtnNum--;
      sendBtnTimer = setInterval(() => {
        if (this.sendBtnNum > 0) {
          this.sendBtnNum--;
          // console.log(this.sendBtnNum);
        } else {
          this.sendBtnNum = 0;
          this.sendBtnShow = true;
          clearInterval(sendBtnTimer);
          sendBtnTimer = null;
          // console.log(this.sendBtnNum);
        }
      }, 1000);
    },
  },
  mounted() {
    // console.log(this.password);
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: url("https://m.imooc.com/static/wap/static/img/account/bg.png")
    no-repeat top center;
  background-size: 100% auto;
  padding: 0.85333333rem;
  padding-top: 2.29333333rem;
  font-size: 0.37333333rem;
  position: relative;
  background-color: #fff;
}
.logo {
  position: absolute;
  left: 50%;
  top: 0.74666667rem;
  margin-left: -0.53333333rem;
  width: 1.06666667rem;
  height: 1.06666667rem;
  background: url("https://m.imooc.com/static/wap/static/img/account/logo.png")
    no-repeat top center;
  background-size: 100%;
}
.input {
  width: 100%;
  font-size: 16px;
  height: 56px;
  margin-top: 20px;
}
.van-cell::after {
  border-bottom: 2px solid #c4c4c4;
}
.button {
  height: 56px;
  font-size: 18px;
  width: 100%;
  margin-top: 30px;
}
.registerlink {
  padding: 16px 0 24px;
  font-size: 16px;
  text-align: center;
  line-height: 0.85333333rem;
  color: #f20d0d;
}
.forgotPass {
  color: #5e5e5e;
  padding-top: 0;
}
.van-field__right-icon > .van-icon {
  font-size: 30px;
}
</style> 